import React, { Component } from 'react'

export default class App extends Component {
    myRef = React.createRef();
    state = {
      list:[{
        id: Math.random(),
        detail: "111"
     },{
        id: Math.random(),
        detail: "222"
     },{
        id: Math.random(),
        detail: "333"
     }]
    }
    addItem(){
        var newList = [...this.state.list];
              newList.push({
                  id:Math.random(),
                  detail: this.myRef.current.value
              });
              this.setState({
                  list: newList
              });
              this.myRef.current.value = '';
              console.log(this.state.list)
    }
    deleteItem(index){
        var newList = [...this.state.list];
        newList.splice(index,1);
        this.setState({
            list:newList
        })
    }
    render() {
    return (
      <div>
          <input ref={this.myRef}></input>
          <button onClick={()=>{this.addItem()}}>Add</button>
          <ul>
              {
                  this.state.list.map((item, index) => 
                    <li key={item.id}>
                        {/* {item.detail} */}
                        <span dangerouslySetInnerHTML={
                            {__html:item.detail}
                        }></span>
                        <button onClick={()=>this.deleteItem(index)}>
                            delete
                        </button>
                    </li>)
              }
          </ul>
          {this.state.list.length==0 ? <div>空空如也</div> : null}
      </div>
    )
  }
}
